// import React from 'react';
// import { Button } from 'antd';
// import { useDispatch, useSelector } from 'react-redux';
// import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

// import './App.less';
// import 'animate.css';
// import { RootState, Dispatch } from '@/store';
// import Home from './pages';
// import About from './pages/about';

// document.title = 'Max Design';

// function App() {
//   const dispatch = useDispatch<Dispatch>();
//   const nickname = useSelector<RootState>(state => state.user.nickname || '') as string;

//   const handleClick = () => {
//     dispatch.user.setUserInfo({ nickname: Math.random().toString() });
//   };

//   return (
//     <div style={{ animationDuration: '1s' }} className="App animate__fadeIn">
//       <header className="App-header">
//         <Button type="primary" onClick={handleClick}>
//           {nickname}
//         </Button>
//       </header>
//       <main className="App-body">
//         <Router>
//           <div>
//             <ul>
//               <li>
//                 <Link to="/">Home</Link>
//               </li>
//               <li>
//                 <Link to="/about">About</Link>
//               </li>
//             </ul>

//             <hr />

//             {/*
//           A <Switch> looks through all its children <Route>
//           elements and renders the first one whose path
//           matches the current URL. Use a <Switch> any time
//           you have multiple routes, but you want only one
//           of them to render at a time
//         */}
//             <Switch>
//               <Route exact path="/">
//                 <Home />
//               </Route>
//               <Route path="/about">
//                 <About />
//               </Route>
//             </Switch>
//           </div>
//         </Router>
//       </main>
//       <footer className="App-footer">App Footer</footer>
//     </div>
//   );
// }

// export default App;

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    document.title = `点击了${count}次...`;
  }, [count]);

  return (
    <div className="App">
      <div>This is the index page.</div>
      <div>{count}</div>
      <div>
        <button type="button" onClick={() => setCount(count + 1)}>
          点击+1
        </button>
      </div>
    </div>
  );
}
